<template>
    <div>
        <el-card shadow="never">
            <el-form ref="filterFormRef" inline :model="listQuery">
                <el-form-item prop="categoryId">
                    <el-cascader
                        v-model="listQuery.categoryId"
                        :options="categoryList"
                        :props="{ checkStrictly: false, emitPath: false }"
                        placeholder="商品分类"
                        clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item prop="supplierId">
                    <el-select v-model="listQuery.supplierId" placeholder="全部供货商">
                        <el-option
                            v-for="item in supplierList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="nameOrCode">
                    <el-row type="flex">
                        <el-input placeholder="商品名称/商品编码" v-model="listQuery.nameOrCode">
                        </el-input>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="never" class="table-container">
            <el-table :loading="listLoading" :data="tableList" border>
                <el-table-column label="商品" width="300" align="center">
                    <template slot-scope="scope">
                        <el-row type="flex" justify="center">
                            <el-avatar shape="square" :size="50" :src="scope.row.resourceUrl">
                                <img :src="scope.row.resourceUrl" />
                            </el-avatar>
                            <div class="goods-info">
                                <div class="goods-name" :title="scope.row.name">
                                    {{ scope.row.goodsName }}
                                </div>
                            </div>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="商品编码" prop="code" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.code }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="单位" prop="unit" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.unit }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="供货商" prop="supplierName" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.supplierName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="现有库存" prop="totalStock" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.totalStock }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="供货价" prop="supplyPrice" align="center">
                    <template slot-scope="scope">
                        <span class="goods-price">￥ {{ formatMoney(scope.row.supplyPrice) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="供货总金额" prop="totalAmount" align="center">
                    <template slot-scope="scope">
                        <span class="goods-price">￥ {{ formatMoney(scope.row.totalAmount) }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[5, 10, 15]"
                    :current-page.sync="listQuery.pageNum"
                    :total="total"
                >
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import { getCateList, getSupplierList } from '@/api/goodsBase';
import { getStorageAvaGooodsList } from '@/api/storage';
import { formatMoney } from '@/utils/goods';
const defaultListQuery = {
    pageNum: 1,
    pageSize: 5,
    categoryId: null,
    supplierId: null,
    nameOrCode: ''
};

export default {
    data() {
        return {
            supplierList: [],
            categoryList: [],
            listLoading: false,
            listQuery: Object.assign({}, defaultListQuery),
            total: 0,
            tableList: [],
            selectedDatas: []
        };
    },
    created() {
        this.fetchCategoryList();
        this.fetchSupplierList();
        this.getTableList();
    },
    methods: {
        fetchCategoryList() {
            getCateList().then(res => {
                if (res.data && res.data.success == true) {
                    let list = res.data.data;
                    this.categoryList = list.map(el => {
                        return {
                            value: el.category.id,
                            label: el.category.name,
                            children: el.detailList.map(el => {
                                return { value: el.categoryId, label: el.name };
                            })
                        };
                    });
                } else {
                    this.categoryList = [];
                }
            });
        },
        fetchSupplierList() {
            getSupplierList().then(res => {
                let resdata = res.data;
                if (resdata && resdata.success) {
                    this.supplierList = resdata.data;
                } else {
                    this.supplierList = [];
                }
            });
        },
        getTableList() {
            getStorageAvaGooodsList(this.listQuery).then(res => {
                if (res.data.success) {
                    this.tableList = res.data.data;
                    this.total = res.data.extra.total;
                } else {
                    this.tableList = [];
                }
            });
        },
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getTableList();
        },
        handleResetSearch() {
            this.$refs.filterFormRef.resetFields();
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getTableList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getTableList();
        },
        formatMoney(num) {
            return formatMoney(num);
        }
    }
};
</script>
<style lang="scss" scoped>
.goods-info {
    width: 150px;
}
.goods-name {
    width: 150px;
    height: 30px;
    text-align: start;
    padding-left: 10px;
    overflow: hidden;
    line-height: 15px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.goods-price {
    color: red;
    float: left;
    margin-left: 10px;
}
.goods-unit {
    float: right;
    text-align: left;
    width: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>
